<!--
 @description 滚动图片列表
 @fileName ScrollPicList.vue
 @author zengqiongying
 @created 2023/09/09 16:54:07
-->
<template>
  <Scroll horizontal class="scoll-content">
    <div class="scroll-pic-list">
      <div v-for="(item,i) in list" :key="i" class="pic-item" @click="handleClick(item,i)">
        <div class="item-content">
          <div class="image">
            <ImageVideo lazy-load :host="host" :src="item[srcName]" fit="fill" />
          </div>
          <div class="name">{{ item[labelName] }}</div>
        </div>
      </div>
    </div>
  </Scroll>

</template>

<script>
import Scroll from '@/components/Scroll'
import ImageVideo from '@/components/ImageVideo'
import { ImagePreview } from 'vant'
export default {
  name: 'ScrollPicList',
  components: { Scroll, ImageVideo },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    host: {
      type: String,
      default: ''
    },
    labelName: {
      type: String,
      default: 'name'
    },
    srcName: {
      type: String,
      default: 'url'
    },
    itemWidth: {
      type: [String, Number],
      default: ''
    },
    preview: {
      // 是否预览大图
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentIndex: 0
    }
  },

  computed: {},

  created() {},
  activated() {},

  mounted() {},

  methods: {
    handleClick(g, i) {
      this.currentIndex = i
      if (!this.preview) {
        this.$emit('click', g)
        return
      }
      const images = this.list.map(e => /^http.+/.test(e[this.srcName]) ? e[this.srcName] : `${this.host || process.env.VUE_APP_ADS_STATIC}/${e[this.srcName]}`)
      if (images.length <= 0) return
      const list = {
        images,
        startPosition: this.currentIndex
      }
      ImagePreview(list)
    }
  }
}

</script>
<style lang='less' scoped>
.scroll-pic-list{
    position: relative;
    flex-wrap:nowrap;
    display: inline-flex;
    padding-left:12px;
    padding-right: 6px;
    .pic-item{
      flex-shrink: 0;
      width: 109px;
      margin-right: 8px;
      .item-content{
        // height: 186px;
        background: #FFFFFF;
        box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
        border-radius: 8px;
        margin-bottom: 20px;
      }
      .image{
        width: 109px;
        height: 130px;
        background: #D8D8D8;
        border-radius: 8px 8px 0px 0px;
        overflow: hidden;
      }
      .name{
        padding:10px 6px;
        font-size: 12px;
        font-weight: 500;
        color: #333333;
        text-align: center;
        line-height: 18px;
        letter-spacing: 1px;
        box-sizing: border-box;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:2;
        overflow: hidden;
      }
    }
}
</style>
